<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/style/spxq.css"/>
		<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="big">
			<header>
				<div>
					<a href="商品列表.html" class="glyphicon glyphicon-menu-left"></a>
				</div>
				<div>
					<span class="glyphicon glyphicon-search"></span>
					<input type="text" id="searchInput"/>
				</div>
				<a href="#">
					<span class="glyphicon glyphicon-th-list"></span><br />
					<span>分类</span>
				</a>
			</header>
			
			
			<ul id="option">
				<li class="active1">
					<span>基本信息</span>
				</li>
				<li>
					<span>商品详情</span>
				</li>
				<li>
					<span>评价</span>
					<span>12</span>
				</li>
				<div id="tiao"></div>
			</ul>
			
			<main>
				
				<div>
					
					
										
					
					
					
					
					
					
					
				</div>
					
			</main>
			
			
			
			<footer>
				<div>
					<span class="glyphicon glyphicon-road"></span><br />
					<span>进店</span>
				</div>
				<div>
					<span class="glyphicon glyphicon-star-empty"></span><br />
					<span>收藏</span>
				</div>
				<div>
					<span>加入购物车</span><br />
					<span>仅支持1倍购买</span>
				</div>
			</footer>
		</div>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
		
	
	
	<script>
		(function(doc, win){
	        var docEl = doc.documentElement,
	            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	            recalc = function(){
	                var clientWidth = docEl.clientWidth;
	                if(!clientWidth) return;
	                docEl.style.fontSize = 100 * (clientWidth / 330) + 'px';
	            };
	        if(!doc.addEventListener) return;
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	    })(document, window);
		var id = parseInt(localStorage.getItem("id"))
		var num = parseInt(localStorage.getItem("num"));
		console.log(id,num)
		var str;
		$.ajax({
			type:"get",
			url:"http://47.92.37.168/supermarket/data/get_commodity_info.php",
			async:false,
			data : {
				id : id
			},
			dataType : "json",
			success : function(data){
				id = data.id
				str = `
					<div id="slide">
						<div>
							<img src="http://47.92.37.168/supermarket/img/${data.img}"/>
						</div>
						<p id="title">
							<span>[天猫超市]</span>
							<span>${data.name}</span>
						</p>
						<p id="danjia">
							<span>¥${data.price}</span><span>卖家优惠</span>
						</p>
						<p>
							<span>满88包邮(20kg内)</span>
							<span>月销量 ${data.count}件</span>
							<span>北京</span>
						</p>
					</div>
				`
				$("main>div:nth-of-type(1)").append(str)
			}
			
		});
		$.ajax({
			type:"get",
			url:"http://47.92.37.168/supermarket/data/get_commodity_evluate.php",
			async:false,
			data :{
				commodity_id:id
			},
			dataType:"jsonp",
			jsonp:"callback",
			success : function(data){
				console.log(data)
				$("#option>li:nth-of-type(3)").children("span:nth-of-type(2)").text(data.length)
			}
		});
		$("#option>li").each(function(ind){
			$(this).click(function(){
				var l = $("#tiao").width();
				$("#tiao").animate({"left":l*ind+"px"})
				$(this).addClass("active1")
				$(this).siblings().removeClass("active1")
			})
			
		})
		$("#option>li").eq(0).click(function(){
			$("main>div:nth-of-type(1)").empty()
			$("main>div:nth-of-type(1)").append(str)
		})
		$("#option>li").eq(2).click(function(){
			$.ajax({
				type:"get",
				url:"http://47.92.37.168/supermarket/data/get_commodity_evluate_info.php",
				async:true,
				data :{
					commodity_id:id,
					start:num
				},
				dataType:"jsonp",
				jsonp:"callback",
				success : function(data){
					console.log(data)
					var str = `
						<div id="pingjia">
							<p>好评</p>
							<p>中评</p>
							<p>差评</p>
						</div>
						<ul id='list'>
					`
					for(var a of data){
						str += `
							<li>
								<p>
									<span>${a.user_name}</span>
									<span>2017-02-12</span>
								</p>
								<p>
									${a.evaluate_info}
								</p>
								<div>
									<img src="../img/2s.jpg"/>
								</div>
							</li>
						`
					}
					str += "</ul>";
					$("main>div:nth-of-type(1)").empty()
					$("main>div:nth-of-type(1)").append(str)
				}
			});
		})
		var un = localStorage.getItem("name")
		$("footer>div:nth-of-type(3)").click(function(){
			$.ajax({
				type:"get",
				url:"http://47.92.37.168/supermarket/data/my_commodity_car.php",
				async:true,
				dataType:"jsonp",
				jsonp:"callback",
				data : {
					'user_phone':un,
					'commodity_id':id,
					'count':1
				},
				success : function(data){
					console.log(data)
				}
			});
		})
	</script>
	</body>
</html>
